<script setup>
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { locales } from "@/plugins/i18n";

const { t, locale } = useI18n();
const value = ref(uni.getLocale());

watch(value, (newValue) => {
  locale.value = newValue;
  uni.setLocale(newValue);
});
</script>

<template>
  <view class="container">
    <s-nav-bar/>
    <view class="container-main" flex flex-col>
      <view m-4>
        {{ t("text.i18n") }}
      </view>
      <uni-data-checkbox
        mode="button"
        v-model="value"
        :localdata="locales"
        :map="{
          text: 'label',
          value: 'key',
        }"
      ></uni-data-checkbox>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>
